
import { EventService } from 'src/app/shared/service/event.service';
import { IonSegment } from '@ionic/angular';
import { ElementRef } from '@angular/core';
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';
import { findIndex } from 'rxjs/operators';
import { AppGlobalService } from 'src/app/shared/service/app-global.service';
declare var $: any;
@Component({
  selector: 'app-slide-location',
  templateUrl: './slide-location.component.html',
  styleUrls: ['./slide-location.component.scss'],
})
export class SlideLocationComponent implements OnInit {
  @Input() tagData: any;
  @ViewChild("tabBar") tabBar: ElementRef;
  @ViewChild("slideSegment", { read: ElementRef }) private segment: ElementRef;
  @ViewChild('slideSegment', null) ionSegment: IonSegment;
  tabPaneIndex = 0;
  tabBarUnderlineStyle: any;
  tabBarTextStyle: any;
  firstItemOffset: any;
  indexArray: any;
  selectedSegment = 0;
  hiddenUnderLine = false;
  tabBarLocationBoxCssStyle = 'X'; // H5 新增参数
  constructor(
    private eventService: EventService,
    private appGlobalService: AppGlobalService
  ) { }

  ngOnInit() {
    let firstItemOffsetStart = 0;

    
    setTimeout(() => {
      if (this.tagData.data
        && this.tagData.data.tabs
        && this.tagData.data.tabs[0]
        && this.tagData.data.tabs[0].tagId
        && document.getElementById(this.tagData.data.tabs[0].tagId)) {
        firstItemOffsetStart = $("#" + this.tagData.data.tabs[0].tagId).offset().top;
      }

      // $('#tabBarLocation').addClass("hide");
      this.indexArray = [];
      this.tagData.data.tabs.forEach(item => {
        const el = document.getElementById(item.tagId) as HTMLElement;
        if (el) {
          this.indexArray.push($("#" + item.tagId).offset().top + $("#" + item.tagId).height() - 50);
        }

      });
      console.log('this.indexArray :' + this.indexArray);

      if (this.tagData.data.tabs[0] && this.tagData.data.tabs[0].hiddenDefaultBar) {
        let dom = document.querySelector(".am-tabs-default-bar");
        dom.classList.add('bar-top-class');
      }
    }, 100);



    if (this.eventService.eventEmit.listenerCount('scrollEnd') > 0) {
      this.eventService.eventEmit.removeListener('scrollEnd');
    }
    if (this.eventService.eventEmit.listenerCount('onScroll') > 0) {
      this.eventService.eventEmit.removeListener('onScroll');
    }
    // 蜂喔商户1.6.23 新增 如果不返回该属性则监听scrollEnd
    if (this.tagData.data.hideScrollEndEvent === undefined) {
      this.eventService.eventEmit.on('scrollEnd', scrollTop => {
        if ($("#" + this.tagData.data.tabs[0].tagId).offset() && $("#" + this.tagData.data.tabs[0].tagId).offset().top) {
          this.firstItemOffset = firstItemOffsetStart - $("#" + this.tagData.data.tabs[0].tagId).offset().top;
          // console.log('firstItemOffset END:'  + this.firstItemOffset );
          if (this.firstItemOffset > 1) {
            if (!$('#tabBarLocation').is('.show')) {
              $('#tabBarLocation').toggleClass("show");
              $('#tabBarLocation').removeClass("hide");
              $("#tabBarLocation").animate({ opacity: '1', }, 'fast');
            }
          } else {

            if ($('#tabBarLocation').is('.show')) {
              $('#tabBarLocation').removeClass("show");
              $('#tabBarLocation').toggleClass("hide");
              $("#tabBarLocation").animate({ opacity: '0', }, 'fast');
            }
          }
        }
      });
    }




    this.eventService.eventEmit.on('onScroll', scrollTop => {

      this.getAcIndex(scrollTop);
      this.firstItemOffset = firstItemOffsetStart - $("#" + this.tagData.data.tabs[0].tagId).offset().top;

      if (this.firstItemOffset > 1) {
        const tabBar = document.getElementById('tabBarLocation');
        if (!$('#tabBarLocation').is('.show')) {
          $('#tabBarLocation').toggleClass("show");
          $('#tabBarLocation').removeClass("hide");
          $("#tabBarLocation").animate({
            opacity: '1',
          }, 'fast');
        }
      } else {
        const tabBar = document.getElementById('tabBarLocation');
        if ($('#tabBarLocation').is('.show')) {
          $('#tabBarLocation').removeClass("show");
          $('#tabBarLocation').toggleClass("hide");
          $("#tabBarLocation").animate({
            opacity: '0',
          }, 'fast');
        }
      }
    });


    // 蜂喔用户新增服务内容滑块
    if (this.tagData.data.tabs[0] && this.tagData.data.tabs[0].hiddenUnderLine) {
      this.hiddenUnderLine = true;
    }

    // 蜂喔商户新增样式联调 2023年5月25日
    if (this.tagData.data.tabs[0] && this.tagData.data.tabs[0].tabBarLocationBoxCssStyle) {
      this.tabBarLocationBoxCssStyle = this.tagData.data.tabs[0].tabBarLocationBoxCssStyle;
    }


    if (this.hiddenUnderLine) {
      this.tabBarUnderlineStyle = { border: '0.01px solid transparent', bottom: '0px', background: 'transparent', width: '0rem' };
    } else {
      this.tabBarUnderlineStyle = { border: '1px solid #ffca3a', bottom: '4px', background: '#0A3CA0', width: '2rem' };
      this.tabBarUnderlineStyle['margin-left'] = 'calc(( 100vw / ' + this.tagData.data.tabs.length + '  - 2rem) * 0.5)';
    }

    this.tabBarTextStyle = { ['z-index']: 2, ['font-size']: '1rem' };

    // 是否自定义text样式
    if (this.tagData.data.tabs[0] && this.tagData.data.tabs[0].tabBarTextStyle) {
      this.tabBarTextStyle = this.getNgStyle(this.tagData.data.tabs[0].tabBarTextStyle);
    }
    this.eventService.eventEmit.on('updateIndex', index => {
      this.tabPaneIndex = index;
    });
  }

  getAcIndex(offSet) {
    for (let i = 0; i < this.indexArray.length; ++i) {
      if (offSet <= this.indexArray[i]) {
        this.tabPaneIndex = i;
        break;
      }
    }
  }

  onClick(event) {
    // tslint:disable-next-line:no-string-literal
    window['tabLocationCanScroll'] = false;
    setTimeout(() => {
      // tslint:disable-next-line:no-string-literal
      window['tabLocationCanScroll'] = true;
    }, 600);
    this.tabPaneIndex = event.index;
    const item = this.tagData.data.tabs[this.tabPaneIndex];
    if (item.tagId) {
      // card-list
      const el = document.getElementById(item.tagId) as HTMLElement;
      if (el) {
        // $("#" + item.tagId).animate({top: $("#" + item.tagId).offset().top});
        setTimeout(() => {
          el.scrollIntoView(true);
        }, 20);
        // $("#" + item.tagId).animate($("#" + item.tagId).scrollTop(95));
        // console.log(item.tagId + ':' + $("#" + item.tagId).offset().top);
      }
    } else {
    }
  }

  // 蜂喔1.9.18 新增 滑动事件
  async segmentChanged(e: any) {
    const index = e.detail.value;
    // tslint:disable-next-line:radix
    this.selectedSegment = parseInt(index);
    const segmentButton = this.segment.nativeElement.children[index];
    segmentButton.scrollIntoView({
      behavior: 'smooth',
      inline: 'center',
      block: 'nearest'
    });
    const item = this.tagData.data.tabs[this.selectedSegment];
    if (item.tagId) {
      // card-list
      const el = document.getElementById(item.tagId) as HTMLElement;
      if (el) {

        // el.scrollIntoView({
        //   behavior: 'smooth',
        //   inline: 'center',
        //   block: 'nearest'
        // });


        // el.scrollIntoView()
        setTimeout(() => {
          el.scrollIntoView({
            behavior: 'smooth',
            // inline: 'nearest',
            block: 'start'
            // block: 'center'
            // block: 'end'
            // block: 'nearest'

          });
        }, 20);
      }
    }
    // setTimeout(() => {

    // }, 50);
  }




  gotoAnchor(index) {
    const segmentButton = this.segment.nativeElement.children[index];
    this.selectedSegment = index;
    segmentButton.scrollIntoView({
      behavior: 'smooth',
      inline: 'center',
      block: 'nearest'
    });
    const item = this.tagData.data.tabs[this.selectedSegment];
    if (item.tagId) {
      // card-list
      const el = document.getElementById(item.tagId) as HTMLElement;
      if (el) {
        el.scrollIntoView({
          behavior: 'smooth',
          inline: 'center',
          block: 'nearest'
        });
      }
    }
    this.appGlobalService.openBackdrop = false;
    $('.bottomSlideBox').fadeOut(100);
    $('.topSlideBox').show();
  }




  onHiddenElementClick(index) {
    this.tabPaneIndex = index;
  }

  downArrowClick() {
    const item = this.tagData.data.tabs[this.selectedSegment];
    $('.topSlideBox').hide();
    $('.bottomSlideBox').fadeIn();
    this.appGlobalService.openBackdrop = true;
  }

  upArrowClick() {
    const item = this.tagData.data.tabs[this.selectedSegment];
    $('.topSlideBox').show();
    $('.bottomSlideBox').hide(100);
    this.appGlobalService.openBackdrop = false;
  }


  getNgStyle(value) {
    if (value) {
      const cssStyles = value.split(";");
      const newStyle = {};
      // tslint:disable-next-line:prefer-for-of
      for (let i = 0; i < cssStyles.length; i++) {
        const cssStrs = cssStyles[i].split(":");
        newStyle[cssStrs[0]] = cssStrs[1];
      }
      return newStyle;
    }
  }
}


